<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<view class="bg-white min-h-full flex flex-col items-center px-[40rpx] py-[40rpx] box-border">
		<view class="w-full">
			<view class="py-[20rpx]" v-if="pid_info.nickname">推荐人：{{pid_info.nickname}}</view>
			<view class="py-[20rpx]">行驶证正面(上传高清证件会自动识别)</view>
			<view v-if="formData.card">
				<u-image @click="chooseImg(1)" :src="formData.card" width="260" height="260"></u-image>
			</view>
			<view v-else><u-icon @click="chooseImg(1)" size="260" color="#999" name="photo"></u-icon></view>

			<view class="py-[20rpx]">行驶证反面(上传高清证件会自动识别)</view>
			<view v-if="formData.card2">
				<u-image @click="chooseImg(2)" :src="formData.card2" width="260" height="260"></u-image>
			</view>
			<view v-else><u-icon @click="chooseImg(2)" size="260" color="#999" name="photo"></u-icon></view>
			
			
			<view class="py-[20rpx]">身份证正面(人像面)</view>
			<view v-if="formData.sfz">
				<u-image @click="chooseImg(3)" :src="formData.sfz" width="260" height="260"></u-image>
			</view>
			<view v-else><u-icon @click="chooseImg(3)" size="260" color="#999" name="photo"></u-icon></view>

			<view class="py-[20rpx]">身份证反面(国徽面)</view>
			<view v-if="formData.sfz2">
				<u-image @click="chooseImg(4)" :src="formData.sfz2" width="260" height="260"></u-image>
			</view>
			<view v-else><u-icon @click="chooseImg(4)" size="260" color="#999" name="photo"></u-icon></view>
			
			<view class="py-[20rpx]">营业执照</view>
			<view v-if="formData.yyzz">
				<u-image @click="chooseImg(5)" :src="formData.yyzz" width="260" height="260"></u-image>
			</view>
			<view v-else><u-icon @click="chooseImg(5)" size="260" color="#999" name="photo"></u-icon></view>

			<u-form borderBottom :label-width="150">
				<u-form-item label="姓名" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.name" :border="false" placeholder="请输入姓名" />
				</u-form-item>
			</u-form>
			
			<u-form borderBottom :label-width="150">
				<u-form-item label="身份证号" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.card_num" :border="false" placeholder="请输入身份证号" />
				</u-form-item>
			</u-form>
			
			<u-form borderBottom :label-width="150">
				<u-form-item label="手机号码" borderBottom :required="true">
					<u-input class="flex-1" type="number" v-model="formData.phone" :border="false" placeholder="请输入手机号码" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="车牌号码" borderBottom :required="true">
					<u-input class="flex-1" type="text" v-model="formData.license_plate_number" :border="false" placeholder="请输入车牌号码" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="所有人" borderBottom :required="true">
					<u-input class="flex-1" type="text" v-model="formData.owner" :border="false" placeholder="请输入所有人" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="车辆类型" borderBottom :required="true">
					<u-input class="flex-1" type="text" v-model="formData.vehicle_type" :border="false" placeholder="请输入车辆类型" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="核定人数" borderBottom :required="true">
					<u-input class="flex-1" type="number" v-model="formData.passenger_capacity" :border="false" placeholder="请输入核定人数" />
				</u-form-item>
			</u-form>

			<u-form borderBottom :label-width="150">
				<u-form-item label="住址" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.address" :border="false" placeholder="请输入住址" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="品牌型号" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.model" :border="false" placeholder="请输入品牌型号" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="车辆识别码" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.vin_code" :border="false" placeholder="请输入车辆识别码" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="发动机号码" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.engine_number" :border="false" placeholder="请输入发动机号码" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="使用性质" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.use_nature" :border="false" placeholder="请输入使用性质" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="发证机关" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.issue_authority" :border="false" placeholder="请输入发证机关" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="发证日期" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.issue_date" :border="false" placeholder="请输入发证日期" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="登记日期" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.registration_date" :border="false" placeholder="请输入登记日期" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="总质量" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.total_weight" :border="false" placeholder="请输入总质量" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="档案编号" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.record_number" :border="false" placeholder="请输入档案编号" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="外廓尺寸" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.overall_dimension" :border="false" placeholder="请输入外廓尺寸" />
				</u-form-item>
			</u-form>
			<u-form borderBottom :label-width="150">
				<u-form-item label="能源标志" borderBottom>
					<u-input class="flex-1" type="text" v-model="formData.energy_sign" :border="false" placeholder="请输入能源标志" />
				</u-form-item>
			</u-form>

			<view class="mt-[100rpx] mx-[26rpx]">
				<u-button @click="handle" type="primary" shape="circle">立即提交</u-button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ossImageXsy,ossImageSfz,uploadImage } from '@/api/app';
import { shibie,shibieSFZ, insertTuangou } from '@/api/shop';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();

import { reactive,ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getUserInfo } from '@/api/user';
// 用户信息
const pid_info = ref<any>({});


const formData = reactive<any>({
	did: '',
	name: '',
	card_num: '',
	phone: '',
	card: '', //上传行驶证正页
	license_plate_number: '', //车牌号码
	owner: '', //所有人
	vehicle_type: '', //车辆类型
	
	sfz:'',//身份证正面
	sfz2:'',//身份证反面
	
	pid:0,//推荐人id
	yyzz:'',//营业执照

	address: '', //住址
	model: '', //品牌型号
	vin_code: '', //车辆识别码
	engine_number: '', //发动机号码
	use_nature: '', //使用性质
	issue_authority: '', //发证机关
	issue_date: '', //发证日期
	registration_date: '', //登记日期
	card2: '', //行驶证副业
	total_weight: '', //总质量

	passenger_capacity: '', //核定人数

	record_number: '', //档案编号
	overall_dimension: '', //外廓尺寸
	energy_sign: '' //能源标志
});

const chooseImg = (e: any) => {
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album', 'camera'], //从相册选择
		success: function (res) {
			let files = res.tempFilePaths[0];
			if(e==1 || e==2){
				uploadImageIng(files, e);
			}else if(e==3 || e==4){
				uploadImageIngSfz(files, e);
			}else if(e==5){
				uploadImageImg(files)
			}
		}
	});
};

const uploadImageImg = async (file: string) => {
    uni.showLoading({
        title: '正在上传中...'
    })
    try {
        const res: any = await uploadImage(file, userStore.temToken!)
		formData.yyzz = res.uri;
        uni.hideLoading()
    } catch (error) {
        uni.hideLoading()
        uni.$u.toast(error)
    }
}

const uploadImageIng = async (file: string, num: Number) => {
	uni.showLoading({
		title: '正在上传中...'
	});
	try {
		const res: any = await ossImageXsy(file, userStore.temToken!);
		uni.hideLoading();
		nowshibie(res.uri, num);
		// nowshibie('http://yuanyiface.oss-cn-shanghai.aliyuncs.com/f908f1d58511a7a208139fc30f549b95.png', num);
	} catch (error) {
		uni.hideLoading();
		uni.$u.toast(error);
	}
};
const uploadImageIngSfz = async (file: string, num: Number) => {
	uni.showLoading({
		title: '正在上传中...'
	});
	try {
		const res: any = await ossImageSfz(file, userStore.temToken!);
		uni.hideLoading();
		if(num==3){
			nowshibieSFZ(res.uri)
			// formData.sfz = res.uri;
		}else if(num==4){
			formData.sfz2 = res.uri;
		}
	} catch (error) {
		uni.hideLoading();
		uni.$u.toast(error);
	}
};

const nowshibie = async (url: string, num: Number) => {
	uni.showLoading({
		title: '识别中...'
	});
	try {
		const res: any = await shibie({url});
		// console.log(res)
		if(num==1){
			formData.card = url;
			formData.license_plate_number = res.data.licensePlateNumber;
			formData.address = res.data.address;
			formData.engine_number = res.data.engineNumber;
			formData.issue_authority = res.data.issueAuthority;
			formData.issue_date = res.data.issueDate;
			formData.model = res.data.model;
			formData.owner = res.data.owner;
			formData.name = res.data.owner;
			formData.registration_date = res.data.registrationDate;
			formData.use_nature = res.data.useNature;
			formData.vehicle_type = res.data.vehicleType;
			formData.vin_code = res.data.vinCode;
		}else if(num==2){
			formData.card2 = url;
			formData.passenger_capacity = res.data.passengerCapacity;
			formData.total_weight = res.data.totalWeight;
			formData.record_number = res.data.recordNumber;
			formData.overall_dimension = res.data.overallDimension;
			formData.energy_sign = res.data.energySign;
		}
		uni.hideLoading();
	} catch (error) {
		uni.hideLoading();
		uni.$u.toast(error);
	}
};

const nowshibieSFZ = async (url: string) => {
	uni.showLoading({
		title: '识别中...'
	});
	try {
		const res: any = await shibieSFZ({url});
		// console.log(res)
		formData.sfz = url;
		formData.card_num = res.idNumber;
		uni.hideLoading();
	} catch (error) {
		uni.hideLoading();
		uni.$u.toast(error);
	}
};

const handle = async () => {
	if (!formData.phone) return uni.$u.toast('请输入手机号');
	if (!formData.license_plate_number) return uni.$u.toast('请输入车牌号码');
	if (!formData.owner) return uni.$u.toast('请输入所有人');
	if (!formData.vehicle_type) return uni.$u.toast('请输入车辆类型');
	if (!formData.passenger_capacity) return uni.$u.toast('请输入核定人数');
	uni.showLoading();
	try {
		await insertTuangou(formData);
		// setTimeout(() => {
		// }, 1500);
		uni.showModal({
			title: '操作成功',
			content: '是否前往抽奖?',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
					window.location.href = "https://dckj.freeswitch.ltd/app/index.php?i=111&c=entry&do=index&m=ohyueo_ohyueo1";
					// uni.navigateTo({
					// 	url:'/pages/webview/webview?url='+'https://dckj.freeswitch.ltd/app/index.php?i=111&c=entry&do=index&m=ohyueo_ohyueo1'
					// })
				} else if (res.cancel) {
					console.log('用户点击取消');
					uni.navigateBack({
						delta:2
					});
				}
			}
		});
		uni.hideLoading();
	} catch (error) {
		uni.hideLoading();
	}
	
	
};
// 获取用户信息
const getUser = async (): Promise<void> => {
	const userInfo = await getUserInfo();
	if(userInfo.pid_info){
		pid_info.value = userInfo.pid_info;
		formData.pid = pid_info.value.id;
	}
	// console.log(formData.pid,'==============================>')
};
onLoad((options: any) => {
	formData.did = options.id;
	// console.log(formData, 111);
	getUser()
});
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}
</style>
